    import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem, Button, Toast, Flex,Icon,WingBlank,Checkbox,WhiteSpace} from 'antd-mobile';
import { createForm } from 'rc-form';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { reg } from './reg.less';
import weixinsvg from '../../assets/img/weixin.svg';
import weibosvg from '../../assets/img/weibo.svg';
import qqsvg from '../../assets/img/QQ.svg';
import username from '../../assets/svg/username.svg';
import password from '../../assets/svg/password.svg';
import code from '../../assets/svg/code.svg';
import select1svg from '../../assets/img/select1.svg';
import rightsvg from '../../assets/img/right.svg';
import selectsvg from '../../assets/img/select.svg';
import { APPSECRECT,publicWXAppID,SERVER_DOMAIN, gotoLogin,gotoWechat } from '../../utils/common';
//import { common } from 'common';

const { Item } = List;
const AgreeItem = Checkbox.AgreeItem;

class Reg extends Component {
    constructor(props) {
        super(props);
        this.state={
            num: 0,
            ret: [],
            countDown: 0,
            getCodeText: '获取验证码',

        }
        this.checked = false;
        this.timer = '';
    }

    onReg = ()=>{
        const { pwd, mobile, verifycode } = this.props.form.getFieldsValue();
        if (!mobile) {
            Toast.info('请输入手机号', 1.5);
            return;
        }
        if (!pwd) {
            Toast.info('请输入密码', 1.5);
            return;
        }
        if (!verifycode) {
            Toast.info('请输入验证码',1.5);
            return;
        }
        if (!this.checked) {
            Toast.info('请您先阅读《用户协议》',1.5);
            return;
        }


        this.props.dispatch({ type: 'login/RegEFF', obj: {telphone:mobile,verifycode, pwd} }).then((r)=>{
            if (r.code == 200) {
                Toast.success(r.msg, 1.5, ()=>{
                    this.props.dispatch(routerRedux.replace({
                        pathname: '/login',
                    }))
                });
            } else {
                Toast.fail(r.msg, 1.5);
            }
        });
    }
    componentDidMount(){
        this.props.dispatch({type:"login/UserProtocolEFF"})
    }

    countdown = () => {
        this.timer = setInterval(() => {
            if (this.state.countDown <= 0) return clearTimeout(this.timer);
            this.setState(state => {
                return {countDown: state.countDown - 1};
            })
        }, 1000);
    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const {veriFyCode=""} = this.props.login.Ret
        // console.log(this.props.login.UserProtocol);
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                //justify="between" alignContent="stretch"
                  className={reg}
            >
                {/*<NavTopBar title="登录"></NavTopBar>*/}

                <MyScroll  style={{
                    height:"100%"
                }}>
                    <form style={{width:"85%",margin:"1.2rem auto",boxShadow:"0 0 10px 5px #999",borderRadius:".1rem"}}>
                        <WingBlank style={{background:"#fff"}}>
                            <WhiteSpace style={{background:"#fff"}}/>
                            <Flex justify="end" style={{background:"#fff"}}>
                                <Icon type="cross" style={{color:"#999",width:".6rem",height:".6rem"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.goBack())
                                }}/>
                            </Flex>
                            <List
                                renderFooter={() => getFieldError('mobile') && getFieldError('mobile').join(',')}
                            >
                                <h1 style={{padding:".5rem .2rem"}}>手机快速注册</h1>
                                <InputItem
                                    {...getFieldProps('mobile')}
                                    clear
                                    placeholder="请输入您的手机号"
                                ><Icon type={username.id}/></InputItem>
                                <InputItem {...getFieldProps('pwd')} placeholder="请输入不少于六位数密码" type="password" ><Icon type={password.id}/></InputItem>
                                <InputItem
                                    {...getFieldProps('verifycode')}
                                    clear onExtraClick={this.getCode}
                                    placeholder="请输入验证码"
                                    extra={
                                        <div>
                                            {
                                                this.state.countDown  <= 0 ?
                                                    <span style={{color:"#ff0036"}} onClick={()=>{
                                                        const { mobile } = this.props.form.getFieldsValue();
                                                        // console.log();

                                                        if (!mobile) return !Toast.fail('请输入您的手机号')
                                                        this.props.dispatch({ type: 'login/regVerifyEFF', obj:{mobile} }).then(res => {
                                                            console.warn(res, '返回的数据。。。');
                                                            if (res.code == 200) {
                                                                Toast.success("已发送",2);
                                                                this.setState({countDown: 60, getCodeText: '重新获取验证码'});
                                                                this.countdown();
                                                            }
                                                        })
                                                    }}>{this.state.getCodeText}</span>
                                                    :
                                                    <span>{this.state.countDown}秒后重新发送</span>
                                            }

                                        </div>
                                    }>
                                    <Icon type={code.id}/>
                                </InputItem>
                            </List>
                            <Flex>
                                <AgreeItem data-seed="logId" style={{fontSize:'.25rem'}} onChange={e => this.checked = e.target.checked}>
                                    注册即表示您已阅读,并同意 <span style={{color:"#0AA6E8"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`userProtocol`
                                        }))
                                }}>《<span>{this.props.login.UserProtocol!==undefined?this.props.login.UserProtocol.title:""}</span>》</span>
                                </AgreeItem>
                            </Flex>
                            <Button type="primary" onClick={this.onReg} style={{borderRadius:".5rem",marginTop: '.3rem'}}>注册</Button>
                            <Flex justify="end" style={{padding:".3rem 0" }}>
                                <Link to="/login" style={{ color: '#777',display:"flex",alignItems:"center"}}><span>已有账号,立即登录</span> <Icon style={{width:".3rem",height:".3rem"}} type="right"/>       </Link>
                            </Flex>

                        </WingBlank>

                    </form>
                    {/*<Flex justify="around">*/}
                        {/*<div style={{border:"1px solid #333",width:"1.5rem",height:"1px"}}></div>*/}
                        {/*<p style={{textAlign:"center",fontSize:"30px"}}>您还可以用以下方式登录</p>*/}
                        {/*<div style={{border:"1px solid #333",width:"1.5rem",height:"1px"}}></div>*/}
                    {/*</Flex>*/}
                    {/*<Flex justify="around" style={{marginTop:".5rem",paddingBottom:"1.2rem"}}>*/}

                        {/*<Icon type={weixinsvg.id} onClick={()=>{gotoWechat()}} style={{width:"1.2rem",height:"1.2rem"}}/>*/}
                        {/*<Icon type={qqsvg.id} style={{width:"1.2rem",height:"1.2rem"}}/>*/}
                        {/*<Icon type={weibosvg.id} onClick={this.gotoSina} style={{width:"1.2rem",height:"1.2rem"}}/>*/}

                    {/*</Flex>*/}
                </MyScroll>


            </Flex>
        );
    }
}

export default connect(({ login }) => ({ login }))(createForm()(Reg));
